<template>
    <!-- 总容器 -->
    <div class="wrapper">
        <header>
            <font-awesome-icon icon="fa-solid fa-rotate-left" @click="returnHome"/>
            <p>预约结果</p>
            <div></div>
        </header>
        <div class="top-ban"></div>

        <section v-show="messages.status">
            <div class="success" >
                <div class="icon-box">
                    <div class="icon">
                        <font-awesome-icon icon="fa-solid fa-check" />
                    </div>
                </div>
                <h1>恭喜预约成功！</h1>
                <p>请体检用户携带本人身份证到店认证</p>
            </div>
            
            <div class="order-btn" @click="toAppointmentList">查看订单</div>
            <div class="continue" @click="toAppointment">继续为家人预约</div>
            <div class="info">
                <p>您的信息已经发送至体检机构</p>
                <p>预约成功后会发送短信至您的手机</p>
                <p>客服电话<span>4008-XXX-XXX</span></p>
            </div>
        </section>
        <section v-show="!messages.status">
            <div class="success" >
                <div class="icon-box">
                    <div class="icon">
                        <font-awesome-icon icon="fa-solid fa-xmark"  />
                    </div>
                </div>
                <h1>预约发生了错误!</h1>
                <p>错误信息:{{messages.msg}}</p>
            </div>
            <div class="info">
                <p>请联系客服解决问题</p>
                <p>客服电话<span>4008-XXX-XXX</span></p>
            </div>
        </section>
        
        <div class="bottom-ban"></div>
        <Footer/>
    </div>
</template>
<script setup>
import Footer from '@/components/Footer.vue';
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
import axios from "../plugin/axiosInstance";
import { reactive, ref } from 'vue';


const messages=reactive({
    status: route.query.status,
    msg : route.query.msg
})

const returnHome=()=>{
    router.push({
        path: '/index',
    })
}

const toAppointmentList=()=>{
    router.push("/appointmentList");
}

const toAppointment=()=>{
    router.push("/appointment");
}
</script>

<style scoped>
@import "../assets/css/appointmentsuccess.css";
</style>
